<!--
 * @Author: kiwi
 * @Date: 2025-05-12 18:28:10
 * @LastEditTime: 2025-05-30 18:09:33
 * @LastEditors: kiwi
 * @FilePath: \kouhan-h5\src\views\page\index\components\product.vue
 * @Description: 
-->
<template>
  <div class="product_page" :style="`background-image:url(${productList[isActive].bgUrl})`">
    <img src="@/assets/images/page/bg_text.png" alt="" class="bg_text">
    <div class="product_main">
      <div class="product_swiper">
        <div class="swiper-container" id="mySwipsers">
          <div class="swiper-wrapper">
            <div 
              class="swiper-slide" 
              v-for="(banner, index) in productList" 
              :key="banner.id"
            >
              <div class="comment-item">
                <img class="avatar" :src="banner.imgUrl" alt="avatar" />
                <div class="text-box">
                  <div class="text">POWER BURST SERIES</div>
                  <div :style="`color:${banner.color}`" class="name">{{banner.pr_name}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="custom-pagination">
          <div class="dots">
            <span v-for="(item, idx) in productList" :key="idx" :class="['dot', {active: idx === isActive}]" @click="onDotClick(idx)"></span>
          </div>
          <span class="mg-badge">{{ productList[isActive].mg }}</span>
        </div>
      </div>
      <div class="flavor-tabs">
        <div class="flavor-row" v-for="(row, rowIndex) in chunkedProductList" :key="'row-' + rowIndex">
          <div 
            v-for="(item, idx) in row" 
            :key="'row' + rowIndex + '-' + idx" 
            :class="['flavor-tab', {active: (idx + (rowIndex * 4)) === isActive}]"
            @click="onDotClick(idx + (rowIndex * 4))"
          >
            {{ item.pr_name }}
          </div>
        </div>
      </div>
      <div class="bottom-desc">
        Zip It is a white smokeless product that combines a variety of refreshing fruit flavors, delivering a rich and <br/> layered taste, accompanied by a strong, satisfying sensation that makes every puff a delightful indulgence.
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
export default {
  data(){
    return{
      isActive: 0,
      productList:[
        {
          id: 1,
          bgUrl:require('@/assets/images/page/bg1.png'),
          imgUrl:require('@/assets/images/page/pr_img1.png'),
          pr_name:'ORANGE SPARK',
          mg:'12mg',
          text1:'POWER BURST SERIES',
          color:'#E2804B'
        },
        {
          id: 2,
          bgUrl:require('@/assets/images/page/bg2.png'),
          imgUrl:require('@/assets/images/page/pr_img2.png'),
          pr_name:'FREEZE MINT',
          mg:'12mg',
          text1:'POWER BURST SERIES',
          color:'#9DBAC8'
        },
        {
          id: 3,
          bgUrl:require('@/assets/images/page/bg3.png'),
          imgUrl:require('@/assets/images/page/pr_img3.png'),
          pr_name:'PEPPER MINT',
          mg:'20mg',
          text1:'POWER BURST SERIES',
          color:'#9FCCBD'
        },
        {
          id: 4,
          bgUrl:require('@/assets/images/page/bg12.png'),
          imgUrl:require('@/assets/images/page/pr_img12.png'),
          pr_name:'ICE MINT',
          mg:'20mg',
          text1:'POWER BURST SERIES',
          color:'#95C4C4'
        },
        {
          id: 5,
          bgUrl:require('@/assets/images/page/bg5.png'),
          imgUrl:require('@/assets/images/page/pr_img4.png'),
          pr_name:'ICE LYCHEE',
          mg:'20mg',
          text1:'POWER BURST SERIES',
          color:'#FF8D8A'
        },
        {
          id: 6,
          bgUrl:require('@/assets/images/page/bg6.png'),
          imgUrl:require('@/assets/images/page/pr_img5.png'),
          pr_name:'COCONUT',
          mg:'8mg',
          text1:'POWER BURST SERIES',
          color:'#6FB88B'
        },
        {
          id: 7,
          bgUrl:require('@/assets/images/page/bg7.png'),
          imgUrl:require('@/assets/images/page/pr_img7.png'),
          pr_name:'SKITTLES',
          mg:'12mg',
          text1:'POWER BURST SERIES',
          color:'#78CB6E'
        },
        {
          id: 8,
          bgUrl:require('@/assets/images/page/bg8.png'),
          imgUrl:require('@/assets/images/page/pr_img8.png'),
          pr_name:'ICE STRAWBERRY',
          mg:'16mg',
          text1:'POWER BURST SERIES',
          color:'#CC4A47'
        },
        {
          id: 9,
          bgUrl:require('@/assets/images/page/bg9.png'),
          imgUrl:require('@/assets/images/page/pr_img9.png'),
          pr_name:'WINTER GREEN',
          mg:'20mg',
          text1:'POWER BURST SERIES',
          color:'#7B984E'
        },
        {
          id: 10,
          bgUrl:require('@/assets/images/page/bg10.png'),
          imgUrl:require('@/assets/images/page/pr_img10.png'),
          pr_name:'YOGURT',
          mg:'8mg',
          text1:'POWER BURST SERIES',
          color:'#F9F9F9'
        },
        {
          id: 11,
          bgUrl:require('@/assets/images/page/bg11.png'),
          imgUrl:require('@/assets/images/page/pr_img11.png'),
          pr_name:'GOLDEN POLEMELO',
          mg:'12mg',
          text1:'POWER BURST SERIES',
          color:'#7DC3DB'
        },
      ],
      mySwipers:null
    }
  },
  computed: {
    chunkedProductList() {
      const chunks = [];
      for (let i = 0; i < this.productList.length; i += 4) {
        chunks.push(this.productList.slice(i, i + 4));
      }
      return chunks;
    }
  },
  mounted(){
    this.initSwiper()
  },
  methods:{
    initSwiper() {
      this.mySwipers = new Swiper('#mySwipsers', {
        direction: 'horizontal',
        slidesPerView: 3, // 一次显示5个
        centeredSlides: true, // active slide 居中
        spaceBetween: 0,
        slidesOffsetBefore:0, 
        loop: true, // 循环
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        on: {
          slideChangeTransitionEnd: () => {
            this.$nextTick(() => {
              this.isActive = this.mySwipers.realIndex;
            });
          }
        },
      });
    },
    onDotClick(idx) {
      if (this.mySwipers) {
        this.mySwipers.slideToLoop(idx);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.product_page{
  width: 100%;
  height: 663px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  .bg_text{
    width: 211px;
    height: 48px;
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translate(-50%,0);
  }
  .product_main{
    width: 100%;
    position: absolute;
    top: 164px;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 100;
    .product_swiper{
      width: 374px;
      margin: 0 auto;
      .swiper-container {
        max-width: 100vw;
        padding-top: 53px;
        padding-bottom: 30px;
      }
      .swiper-wrapper {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
      }
      ::v-deep .swiper-slide {
        transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
        opacity: 0.7;
        filter: blur(0.5px);
        &.swiper-slide-active {
          opacity: 1;
          transform: scale(1.05);
          filter: none;
          z-index: 3;
        }
        &.swiper-slide-prev{
          z-index: 2;
          opacity: 0.8;
        }
        &.swiper-slide-next{
          z-index: 2;
          opacity: 0.8;
        }
      }
      .comment-item {
        width: 123px;
        height: 147px;
        border-radius: 15px;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.01);
        text-align: center;
        background: #fff;

        .avatar{
          width: 85px;
          height: 85px;
          display: inline-block;
          margin-top: 13px;
        }
        .text{
          width: 100%;
          color: #727171;
          font-size: 5px;
          text-align: center;
          margin-bottom: 5px;
        }
        .name{
          width: 100%;
          font-size: 10px;
          text-align: center;
        }
      }
      .custom-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 31px 0;
        .dots {
          display: flex;
          align-items: center;
          gap: 15px;
          background: #ffffff;
          padding: 6px 16px;
          border-radius: 15px;
        }
        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #F7F7F7;
          display: inline-block;
          transition: background 0.2s;
          cursor: pointer;
          &.active {
            background: #FFE46F;
            box-shadow: 0 0 6px #FFE46F;
          }
        }
        .mg-badge {
          margin-left: 15px;
          padding: 2px 8px;
          background: #FFE46F;
          color: #000000;
          font-weight: bold;
          border-radius: 10px;
          font-weight: 600;
          font-size: 13px;
          box-shadow: 0 2px 8px rgba(255,211,106,0.18);
        }
      }
    }
    .flavor-tabs {
      width: calc(100% - 56px);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      background-color: #ffffff;
      padding: 0px 9px;
      border-radius: 6px;
      .flavor-row {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-bottom: 0;
        height: 29px;
        border-bottom: 1px solid #E9E9EA;
        &:last-child{
          border-bottom:0;
        }
      }
      .flavor-tab {
        color: #B5B5B6;
        font-size: 9px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        &.active {
          background: #F4F4F4;
          color: #000000;
          font-weight: bold;
          box-shadow: 0 2px 8px rgba(255,211,106,0.18);
          padding: 2px 7px;
        }
      }
    }
  }
  .bottom-desc {
    width: calc(100% - 100px);
    margin: 0 auto;
    text-align: center;
    color: #B5B5B6;
    font-size: 10px;
    font-weight: 600;
    margin-top: 28px;
    letter-spacing: 0.5px;
    line-height: 13px;
    
  }
}
::v-deep.swiper-slide-active {
  .comment-item {
    width: 166px!important;
    height: 167px!important;
    background: #FFE46F!important;
    box-shadow: 0 8px 32px 0 rgba(226, 128, 75, 0.01)!important;
    position: relative;
    right:20px!important;
    .avatar{
      width: 182px!important;
      height: 160px!important;
      display: inline-block!important;
      margin-top: 20px!important;
      position: absolute!important;
      top: -70px!important;
      left: 50%!important;
      transform: translate(-50%,0)!important;
    }
    .text-box{
      position: absolute!important;
      bottom: 30px!important;
      left: 50%!important;
      transform: translate(-50%,0)!important;
      width: 100%!important;
      .text{
        width: 100%;
        color: #727171!important;
        font-size: 8px!important;
        text-align: center!important;
        margin-bottom: 5px!important;
      }
      .name{
        width: 100%!important ;
        font-size: 16px!important;
        text-align: center!important;
      }
    }
  }
}
</style>